<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:body>
        <div class="section">
            <div class="container_24 clearfix">
                <p:growl autoUpdate="true" life="3000" />
                <p:panel id="general" header="Dados Gerais" styleClass="">
                    <p:defaultCommand scope="general" target="next" />

                    <script>
                        $('html, body').animate({ scrollTop: 0 }, 0);
                    </script>
                    <p:outputLabel value="CPF: " styleClass="grid_3" for="cpf" />
                    <p:inputMask id="cpf" mask="999.999.999-99" required="true" requiredMessage="Campo CPF é obrigatório" styleClass="grid_8" value="#{managerCreateSale.customer.cpf}" >
                        <p:ajax event="blur" listener="#{managerCreateSale.verifyCustomer()}" process="@this" />
                    </p:inputMask>

                    <p:outputLabel value="RG: " styleClass="grid_3" />
                    <p:inputText styleClass="grid_9" maxlength="12" value="#{managerCreateSale.customer.rg}" />
                    <div class="clear-both"/>

                    <p:outputLabel value="Nome:" styleClass="grid_3" for="name" />
                    <p:inputText id="name" styleClass="grid_20" style="width: 82.5% !important;"
                                 required="true" requiredMessage="Campo nome é obrigatório" 
                                 value="#{managerCreateSale.customer.name}" />

                    <div class="clear-both"/>
                    <p:outputLabel value="Sexo: " styleClass="grid_3"/>
                    <div class="grid_8">
                        <p:selectOneMenu panelStyle="width:150px;" value="#{managerCreateSale.customer.gender}">  
                            <f:selectItem itemLabel="" itemValue="" />  
                            <f:selectItems value="#{managerCreateCustomer.gender}" />  
                        </p:selectOneMenu> 
                    </div>

                    <p:outputLabel value="Profissão:" styleClass="grid_3" style="left: 10px;" />
                    <p:inputText styleClass="grid_9" value="#{managerCreateSale.customer.profession}" style="left: 10px;" />
                    <div class="clear-both"/>

                    <p:outputLabel value="Nacionalidade:" styleClass="grid_3 nationalityLabel" />
                    <p:inputText styleClass="grid_8" value="#{managerCreateSale.customer.nationality}"/>

                    <p:outputLabel value="Estado Civil: " styleClass="grid_3 civilStatusLabel"/>
                    <div class="grid_9">
                        <p:selectOneMenu panelStyle="width:150px;" value="#{managerCreateSale.customer.civilStatus}">  
                            <f:selectItem itemLabel="" itemValue="" />  
                            <f:selectItems value="#{managerCreateCustomer.civilStatus}" />  
                            <p:ajax update="conjugue" process="@this" 
                                    listener="#{managerCreateSale.ajaxTypeCivisStatus()}" />
                        </p:selectOneMenu> 
                    </div>
                    <div class="clear-both"/>
                    <p:outputLabel value="D. Nasc:" styleClass="grid_3" for="dataNasc" />
                    <p:calendar showOn="button" styleClass="grid_8" 
                                required="true"
                                id="dataNasc"
                                requiredMessage="Campo data de nascimento é obrigatório"
                                pattern="dd/MM/yyyy"
                                value="#{managerCreateSale.customer.dateOfBirth}"/>

                    <p:outputLabel value="Telefone:" styleClass="grid_3" style="left: 10px;"   />
                    <p:inputMask mask="(99)9999-9999" styleClass="grid_9" value="#{managerCreateSale.customer.fixedPhone}" style="left: 10px;"  />
                    <div class="clear-both"/>

                    <p:outputLabel value="Celular:" styleClass="grid_3" />
                    <p:inputMask mask="(99)9999-9999" styleClass="grid_8" value="#{managerCreateSale.customer.celPhone}" />

                    <p:outputLabel value="Email:" styleClass="grid_3" />
                    <p:inputText styleClass="grid_9" value="#{managerCreateSale.customer.email}" />
                    <div class="clear"/>
                </p:panel>
                <div class="clear" />

                <p:panel id="endereco" header="Endereço" styleClass="clearfix " >
                    <p:outputLabel value="Rua:" styleClass="grid_3" for="street" />
                    <p:inputText styleClass="grid_13"  id="street" value="#{managerCreateSale.address.patio}" />

                    <p:outputLabel value="Num:" styleClass="grid_3 alpha" for="addressNumber" />
                    <p:inputText styleClass="grid_4" id="addressNumber" value="#{managerCreateSale.address.num}" />
                     <div class="clear-both"/>
                    <p:outputLabel value="Bairro:" styleClass="grid_3" for="bairro" />
                    <p:inputText  styleClass="grid_13"  id="bairro" value="#{managerCreateSale.address.district}" />
                                    <div class="clear-both"/>

                    <p:outputLabel  value=" Cidade: " styleClass="grid_3" for="cityAddress"  />
                    <p:autoComplete styleClass="grid_13" dropdown="true" converter="cityconverter"   
                                    var="cityValue" itemLabel="#{cityValue.name.toString().concat(' - ')}#{cityValue.country.sgl}" 
                                    itemValue="#{cityValue}" value="#{managerCreateSale.city}"
                                    scrollHeight="200" forceSelection="true"
                                    completeMethod="#{managerCreateCustomer.autocompleteCity}"
                                    id="cityAddress" /> 


                    <p:outputLabel value="CEP :" styleClass="grid_3" />
                    <p:inputMask mask="99.999-999" styleClass="grid_4" value="#{managerCreateSale.address.cep}" />
                    <div class="clear-both"/>
                    <p:outputLabel value="Complemento:" styleClass="grid_3 nationalityLabel" />
                    <p:inputText styleClass="grid_20"  value="#{managerCreateSale.address.complement}" />
                    <div class="clear-both"/>
                    <p:outputLabel value="Tipo: " styleClass="grid_3"/>
                    <div class="grid_13">
                        <p:selectOneMenu panelStyle="width:150px;" value="#{managerCreateSale.address.typeAddress}">  
                            <f:selectItem itemLabel="" itemValue="" />  
                            <f:selectItems value="#{managerCreateCustomer.typeAddress}" />  
                        </p:selectOneMenu> 
                    </div>
                    <div class="clear"/>

                    <br/>
                    <div class="buttonAction">
                        <p:commandButton value="Adicionar"
                                         actionListener="#{managerCreateSale.addAddress()}"
                                         update="endereco, tableAdd"
                                         process="endereco"
                                         id="addAddress"
                                         icon="ui-icon-plus"/>
                        <p:commandButton value="Limpar" icon="ui-icon-close" actionListener="#{managerCreateSale.cleanAddress()}" update="endereco" process="@this" />
                    </div>

                    <p:dataTable id="tableAdd" var="address" value="#{managerCreateSale.addresses}" 
                                 styleClass="grid_24"
                                 rowIndexVar="rowid"
                                 emptyMessage="Nenhum registro">  
                        <f:facet name="header">
                            Endereço
                        </f:facet>
                        <p:column headerText="Rua" width="300">  
                            <h:outputText value="#{address.patio}"/>
                        </p:column>  
                        <p:column headerText="Bairro">  
                            <h:outputText value="#{address.district}"/>
                        </p:column>
                        <p:column headerText="Tipo">  
                            <h:outputText value="#{address.typeAddress}"/>
                        </p:column>

                        <p:column headerText="Ação" width="75">
                            <p:commandButton  style="width: 20px; height: 20px;" 
                                              update=":saleForm:endereco, tableAdd"
                                              process=":saleForm:endereco, @this"
                                              actionListener="#{managerCreateSale.edit(address,rowid)}"
                                              icon="ui-icon-pencil"/>
                            <p:commandButton  style="width: 20px; height: 20px;" 
                                              update=":saleForm:endereco, tableAdd"
                                              process=":saleForm:endereco, @this"
                                              actionListener="#{managerCreateSale.remove(rowid)}"
                                              icon="ui-icon-trash"/>
                        </p:column>
                    </p:dataTable> 

                    <div class="clear"/>
                    <br/>
                </p:panel>
                <div class="clear" />

                <p:panel header="Cônjuge" id="conjugue" visible="#{managerCreateSale.conjugeVisible}">
                    <p:outputLabel value="CPF:" styleClass="grid_3" for="conjCpf" />
                    <p:inputMask  id="conjCpf" mask="999.999.999-99" styleClass="grid_8" required="#{managerCreateSale.conjugeVisible}" requiredMessage="CPF do cônjuge é obrigatório" value="#{managerCreateSale.conjuge.cpf}">
                        <p:ajax event="blur" process="conjCpf, conjNome, conjRg"  update="conjCpf, conjNome, conjRg "
                                listener="#{managerCreateSale.customerExist()}" />
                    </p:inputMask>

                    <p:outputLabel  value="RG:" styleClass="grid_3 alpha" for="conjRg" />
                    <p:inputText  id="conjRg" required="#{managerCreateSale.conjugeVisible}" requiredMessage="Nome do Cônjuge é obrigatório" styleClass="grid_9" maxlength="12" value="#{managerCreateSale.conjuge.rg}" />
                    <div class="clear-both"/>

                    <p:outputLabel  value="Nome:" styleClass="grid_3" />
                    <p:inputText id="conjNome" styleClass="grid_20" value="#{managerCreateSale.conjuge.name}" />

                    <div class="clear"/>
                </p:panel>
                <div class="clear" />

                <p:panel header="Anexos" styleClass="clearfix " id="anexos">
                    <p:fileUpload 
                        mode="advanced"  
                        label="Anexar"
                        fileUploadListener="#{managerCreateSale.handle}"
                        multiple="true" 
                        auto="true"
                        invalidFileMessage="Tipo de arquivo não suportado."
                        invalidSizeMessage="Tamanho do arquivo não é suportado"
                        uploadLabel="Enviar"
                        cancelLabel="Cancelar"
                        immediate="false"
                        update="msg"
                        allowTypes="/(\.|\/)(gif|tif|jpe?g|png|pdf)$/"/> 

                </p:panel>
                <div class="clear" />

                <p:panel styleClass="clearfix " header="Referências" id="refs">
                    <p:outputLabel value="Nome:" styleClass="grid_3" for="refNome1" />
                    <p:inputText id="refNome1" styleClass="grid_10" value="#{managerCreateSale.sale.nameOfReference1}" required="true" requiredMessage="É necessário cadastrar duas referências" />
                    <p:outputLabel value="Telefone:" styleClass="grid_4" for="refTel1" />
                    <p:inputMask id="refTel1" required="true" requiredMessage="Telefone das referências são obrigatórios" mask="(99)9999-9999" styleClass="grid_6" value="#{managerCreateSale.sale.phoneOfReference1}" />
                    <div class="clear-both"/>
                    <p:outputLabel value="Nome:" styleClass="grid_3" for="refNome2" />
                    <p:inputText id="refNome2" required="true" requiredMessage="É necessário cadastrar duas referências" styleClass="grid_10" value="#{managerCreateSale.sale.nameOfReference2}" />
                    <p:outputLabel value="Telefone:" styleClass="grid_4" for="refTel2" />
                    <p:inputMask id="refTel2" mask="(99)9999-9999" required="true" requiredMessage="Telefone das referências são obrigatórios" styleClass="grid_6" value="#{managerCreateSale.sale.phoneOfReference2}" />
                    <div class="clear"/>
                    <br/>
                </p:panel>
            </div>

            <p:confirmDialog width="350" closable="false" message="Este CPF ja se encontra cadastrado no nome de '#{managerCreateSale.aux.name}', deseja utilizá-lo ?"  header="CPF ja cadastrado" id="customerDlg" widgetVar="customerDlg">
                <div style="text-align: center;margin: 8px">
                    <p:commandButton icon="ui-icon-check" value="Sim" action="#{managerCreateSale.loadCustomer()}" id="yes" process="@this" update=":saleForm"  />
                    <p:commandButton icon="ui-icon-close" value="Não" action="#{managerCreateSale.clearCpf()}" oncomplete="customerDlg.hide()" process="@this" update="cpf" />
                </div>
                <p:defaultCommand scope=":saleForm:customerDlg"  target=":saleForm:yes"/>

            </p:confirmDialog>

        </div>
                <p:commandButton styleClass="classNext" id="next2" value="Próximo" process="general, conjugue, anexos, refs"  style="float: right;display: block" icon="ui-icon-arrowthick-1-e" update="general, conjugue, anexos, refs, msg"  oncomplete="wiz.next();" />


    </h:body>
</html>
